<template>
  <div class="container">
    <v-header :title="title"></v-header>

    <h1>基础设置</h1>
    <div class="content">
      <ul class="info-list">
        <li class="list-item" >
          <div class="view-left">
            <span class="title">相册名</span>
          </div>
          <div class="view-right">
            <div class="input-box">
              <input type="text" class="text" placeholder="请输入相册名称" v-model="name">
            </div>
          </div>
        </li>

        <li class="list-item" @click="pickDate">
          <div class="view-left">
            <span class="title">拍摄时间</span>
          </div>
          <div class="view-right">
            <div class="input-box">
              <input type="text" class="text" disabled placeholder="请选择日期" v-model="fullDate" >
            </div>
            <i class="icon"></i>
          </div>
        </li>

        <li class="list-item" @click="pickCity">
          <div class="view-left">
            <span class="title">城市</span>
          </div>
          <div class="view-right">
            <div class="input-box">
              <input type="text" class="text" disabled placeholder="请选择城市" v-model="fullCity">
            </div>
            <i class="icon"></i>
          </div>
        </li>
      </ul>

      <div class="create-btn" @click="create">创建</div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">

import VHeader from 'components/v-header'

export default {
  data() {
    return {
      title: '创建相册',
      name: '',
      date: {
        y: '2010',
        m: '06',
        d: '20'
      },
      city: [
        {
          index: '18',
          text: '广东省'
        },
        {
          index: '15',
          text: '清远市'
        }
      ]
    }
  },
  components: {
    VHeader
  },
  methods: {
    pickDate: function () {
      let options = { //日期选择器配置项
        type:'date',
        beginYear: 2000,
        endYear: new Date().getFullYear(),
      }
      if (this.fullDate) {
        options = Object.assign({value: this.fullDate}, options)
        console.log(options)
      }
      let _this = this
      let dtPicker = new mui.DtPicker(options); //初始化
      dtPicker.show(function (selected) {
        console.log(selected)
        _this.date.y = selected.y.value //年
        _this.date.m = selected.m.value //月
        _this.date.d = selected.d.value //日

        dtPicker.dispose()
      })
    },
    pickCity: function () {
      let ctPicker = new mui.PopPicker({layer: 2})  //初始化二级联动
      ctPicker.setData(cityData) //添加数据 来源于mui city.data.js
      if (this.fullCity) {  //检查是否设置过地址 有则 初始化指定列表选中项
        ctPicker.pickers[0].setSelectedIndex(this.city[0].index)  //省级
        ctPicker.pickers[1].setSelectedIndex(this.city[1].index)  //市级  
        console.log(ctPicker.pickers[1])
      }
      let _this = this
      ctPicker.show(function (selected) {
        console.log(selected)
        _this.city = [
          {
            index: ctPicker.pickers[0].lastIndex,  //获取下标
            text: selected[0].text  //获取文本
          },
          {
            index: ctPicker.pickers[1].lastIndex,
            text: selected[1].text
          }
        ]
      })
    },
    create: function () {

    }
  },
  computed: {
    fullDate () {
      let fullDate
      if (this.date.y) {
        fullDate = `${this.date.y}-${this.date.m}-${this.date.d}`
      } else {
        fullDate = ''
      }
      return fullDate
    },
    fullCity () {
      let fullCity
      if (this.city[0].index) {
        if (this.city[0].text == this.city[1].text) {
          fullCity = this.city[0].text
        } else {
          fullCity = `${this.city[0].text}${this.city[1].text}`
        }
        
      } else {
        fullCity = ''
      }
      return fullCity
    }
  }
}
</script>

<style scoped lang="stylus">

@import '../../common/stylus/mixin.styl'
@import '../../common/stylus/variable.styl'

.container
  position fixed
  width 100%
  height 100%
  background-color $color-bg-gray
  h1
    height 30px
    line-height 30px
    padding-left 20px
    margin-top 10px
    font-size $font-size-small
    color #999999
    background-color #d9d9d9
  .content
    .info-list
      background-color #fff
      .list-item
        display flex
        align-items center
        height 50px
        padding 0 20px
        border-bottom-1px(rgba(0, 0, 0, .1))
        .view-left
          width 90px
          .title
            font-size $font-size-medium-x
            color #333333
        .view-right
          display flex
          flex 1
          align-items center
          .input-box
            flex 1
            .text
              border-none()
              width 100%
              font-size $font-size-medium
              &::placeholder
                font-size $font-size-small-s
                color #d9d9d9
          .icon
            width 7px
            height 14px
            margin-left 10px
            bg-image('../../common/images/more')
            background-size 100% 100%
    .create-btn
      height 45px
      line-height 45px
      margin 100px 20px 0
      text-align center
      background-color $color-theme
      color #fff
      font-size $font-size-medium  
      border-radius 3px

</style>
